<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">


    <!-- build:css /static/lib/detail.min.css -->
    <link href="/static/lib/css/mui.css" rel="stylesheet"/>
    <link href="/static/lib/css/swiper-3.4.2.min.css" rel="stylesheet"/>
    <!-- endbuild -->

    <!-- build:css /static/components/detail.min.css -->
    <link href="/static/components/css/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="/static/components/css/detail.css" rel="stylesheet" type="text/css"/>
    <!-- endbuild -->
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="{{ url_for('home.index') }}"></a>
    <h1 class="mui-title" style="font-size:0.3rem ;color: #333333;font-weight: normal;">游戏详情</h1>
</header>
<div id="scroll" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
        <div class="parallax-banner-wrapper" style="z-index: -99;">
            <div id="parallax" class="parallax-banner">
                <!--<img src="../static/components/img/find/find_banner_three_09.jpg" />-->
            </div>
        </div>

        <div class="parallax-content">
            <ul id="detail_ul" class="mui-table-view">
                <!--<li class="mui-table-view-cell mui-media">-->
                <!--<img class="mui-media-object mui-pull-left" src="../static/components/img/qbyx/qbyx_icon_14.png">
                <div class="mui-media-body main_title">
                    王者荣耀
                </div>
                <div class="mui-media-body">
                    <div style="display: inline;">
                        <span class="iconfont icon-xing1"></span>
                        <span class="iconfont icon-xing1"></span>
                        <span class="iconfont icon-xing1"></span>
                        <span class="iconfont icon-xing1"></span>
                        <span class="iconfont icon-xing1"></span>
                        <span class="final_score">&nbsp;&nbsp;5.0</span>
                    </div>
                    <span class="mui-pull-right iconfont icon-xiazai hot_download button_download">下载</span>
                </div>
                <div class="mui-media-body mui-ellipsis">
                    <span class="game_type">竞技</span>
                    <span class="game_type">对抗</span>
                </div>-->
                <!--</li>-->
            </ul>
            <!--评论小尾巴一-->
            <div id="comment_content">
                “骚年，要不要一起去龙之谷？
            </div>
            <div id="comment_tail" style="display:inline;float: right;padding-right: 0.4rem;margin-bottom: 0.15rem;">
						<span class="iconfont icon-jichutubiao_jiangli"
                              style="font-size: 0.22rem;line-height: 0.45rem;">
								热门评论
                        </span>
            </div>
            <div class="mui-content">
                <div style="padding: 10px 50px;">
                    <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-primary">
                        <a id="btn_describe" class="mui-control-item mui-active" href="#item1">详情</a>
                        <a id="btn_comment" class="mui-control-item" href="#item2">评论</a>
                    </div>
                </div>

                <div>
                    <div id="item1" class="mui-control-content mui-active">
                        <div style="background-color: white;border-top: 1px solid #c8c8c8;">&nbsp;</div>
                        <!--图片banner-->
                        <div class="swiper-container">
                            <div class="swiper-wrapper" id="detail_banner">
                                <!--<div class="swiper-slide">
                                    <img src="../static/components/img/yxxq/wzry_pic_82.jpg" />
                                </div>
                                <div class="swiper-slide">
                                    <img src="../static/components/img/yxxq/wzry_pic_84.jpg" />
                                </div>
                                <div class="swiper-slide">
                                    <img src="../static/components/img/yxxq/wzry_pic_86.jpg" />
                                </div>
                                <div class="swiper-slide">
                                    <img src="../static/components/img/yxxq/wzry_pic_123.jpg" />
                                </div>
                                <div class="swiper-slide">
                                    <img src="../static/components/img/yxxq/wzry_pic_125.jpg" />
                                </div>-->
                            </div>
                        </div>
                        <div id="" style="background-color: white;border-bottom: 1px solid #c8c8c8;">&nbsp;</div>
                        <div id="alltext">
                            <div class="detail_alltext_title">
                                内容摘要
                            </div>
                            <p class="detail_alltext_content">
                                《王者荣耀》是全球首款5V5英雄公平对战手游，腾讯最新MOBA手游大作！ 作为一款MOBA类游戏，《王者荣耀》 特色多多，在同类的游戏中可谓是一枝独秀，艳压全场。
                                5V5王者峡谷、5V5深渊大乱斗、以及3V3、1V1等多样 模式一键体验，热血竞技尽享快感！海量英雄随心选择，精妙配合默契作战！10秒实时跨区匹配，与好友组队登
                                顶最强王者！操作简单易上手，一血、五杀、超神，极致还原经典体验！
                            </p>
                            <div class="detail_cut_off_line">
                            </div>
                            <div class="detail_alltext_mess">
                                信息
                            </div>
                            <div class="detail_alltext_messcontent">
                                开发者：腾讯科技（上海）有限公司<br/> 大小：679MB
                                <br/> 下载次数：9865次
                                <br/> 更新时间：2017-4-10
                                <br/> 版本：v1.18.1.1
                                <br/> 语言：简体中文
                                <br/>

                            </div>
                        </div>
                    </div>
                    <div id="item2" class="mui-control-content">
                        <div class="getscore">
                            <div class="mui-inline" style="font-size: 0.26rem;color: #333333;">我要评分:</div>
                            <div class="icons mui-inline" style="margin-left: 6px;" id="myscore_star">
                                <span data-index="1" class="iconfont icon-xing1"></span>
                                <span data-index="2" class="iconfont icon-xing1"></span>
                                <span data-index="3" class="iconfont icon-xing1"></span>
                                <span data-index="4" class="iconfont icon-xing1"></span>
                                <span data-index="5" class="iconfont icon-xing1"></span>
                            </div>
                            <div class="mui-inline" id="word"
                                 style="font-size: 0.24rem;color: #999;margin-left: 0.3rem;">
                                力挺
                            </div>
                        </div>
                        <div>
                            <!--<div class="comment_item_title">
                                评论(8)
                            </div>-->
                            <ul class="mui-table-view all_comment_ul">
                                <!--<li class="mui-table-view-cell mui-media">
                                    <div class="comment_item">
                                        <div class="mui-media-body" style="height: 0.8rem;">
                                            <img class="mui-media-object mui-pull-left" src="../static/components/img/yxxq/avatar_102.png">
                                            <span class="comment_item_name">游客1556</span>
                                            <span class="iconfont icon-pl comment_icon mui-pull-right">55</span>
                                            <span class="iconfont icon-zan upvote  mui-pull-right"></span>
                                            <div class="comment_item_star">
                                                <span data-index="1" class="iconfont icon-xing1"></span>
                                                <span data-index="2" class="iconfont icon-xing1"></span>
                                                <span data-index="3" class="iconfont icon-xing1"></span>
                                                <span data-index="4" class="iconfont icon-xing1"></span>
                                                <span data-index="5" class="iconfont icon-xing1"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="comment_text">
                                        <div class="comment_text_content">
                                            iOS43区白金1，收徒弟。只收女生，有意的留下你的ID。
                                        </div>
                                        <div class="comment_text_data">
                                            2017-04-17
                                        </div>
                                        <div id="comment_others">
                                            <div>
                                                <img src="../static/components/img/yxxq/sanjiao_128.png" class="xiaosanjiao" />
                                            </div>
                                            <ul class="comment_other_ul">
                                                <li data-fromName='a1' data-toName='a2' data-parentId='' data-id='' data-gemeId=''>二营长：借楼，40区王者收徒，男女不限！</li>
                                                <li>嘎子回复二营长：大神求带！</li>
                                                <li>左手画方：白金1就敢带妹子，方：白金1就敢带妹子呵呵哒！</li>
                                                <li>饱暖思淫欲：我是妹子，但我是钻石1，拜我为师有兴趣吗！</li>
                                                <li>她说：自古三楼是大神！</li>
                                            </ul>

                                        </div>
                                    </div>
                                </li>
                                <li class="mui-table-view-cell mui-media">
                                    <div class="comment_item">
                                        <div class="mui-media-body" style="height: 0.8rem;">
                                            <img class="mui-media-object mui-pull-left" src="../static\components\img\yxxq\avatar_142.png">
                                            <span class="comment_item_name">游客4385</span>
                                            <span class="iconfont icon-pl comment_icon mui-pull-right">55</span>
                                            <span class="iconfont icon-zan upvote  mui-pull-right">345</span>
                                            <div class="comment_item_star">
                                                <span data-index="1" class="iconfont icon-xing1"></span>
                                                <span data-index="2" class="iconfont icon-xing1"></span>
                                                <span data-index="3" class="iconfont icon-xing1"></span>
                                                <span data-index="4" class="iconfont icon-xing1"></span>
                                                <span data-index="5" class="iconfont icon-xing1"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="comment_text">
                                        <div class="comment_text_content">
                                            听说评论有礼包//手动滑稽//
                                        </div>
                                        <div class="comment_text_data">
                                            2017-04-17
                                        </div>
                                    </div>
                                </li>
                                <li class="mui-table-view-cell mui-media">
                                    <div class="comment_item">
                                        <div class="mui-media-body" style="height: 0.8rem;">
                                            <img class="mui-media-object mui-pull-left" src="../static/components/img/yxxq/avatar_148.png">
                                            <span class="comment_item_name">游客8654</span>
                                            <span class="iconfont icon-pl comment_icon mui-pull-right">55</span>
                                            <span class="iconfont icon-zan upvote  mui-pull-right">345</span>
                                            <div class="comment_item_star">
                                                <span class="iconfont icon-xing1"></span>
                                                <span class="iconfont icon-xing1"></span>
                                                <span class="iconfont icon-xingxing"></span>
                                                <span class="iconfont icon-xingxing"></span>
                                                <span class="iconfont icon-xingxing"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="comment_text">
                                        <div class="comment_text_content">
                                            坑比太多了，强烈要求限制小学生上线时间！
                                        </div>
                                        <div class="comment_text_data">
                                            2017-04-17
                                        </div>
                                    </div>
                                </li>
                            -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="div_bottom_download">
    <div class="div_bottom_download_child download">
        下载
    </div>
</div>
<div class="div_bottom_input">
    <!--<div class="footer-left">
        <i class="mui-icon mui-icon-chatbubble"></i>
    </div>-->
    <div class="footer-center">
        <div class="test-textarea" contenteditable="true" placeholder="我也来说两句"><br/></div>
        {#        <textarea type="text" placeholder="我也来说两句" class='input-text'></textarea>#}
    </div>
    <label class="footer-right btn_send_comment">
        发送
    </label>
</div>
<!-- build:js /static/js/detail.min.js -->
<script src="/static/lib/js/mui.min.js" type="text/javascript"></script>
<script src="/static/lib/js/jquery.js" type="text/javascript"></script>
<script src="/static/components/js/util.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/lib/js/swiper-3.4.2.min.js" type="text/javascript"></script>
<!-- endbuild -->
<script src="/static/components/js/ag.js" type="text/javascript"></script>

<script>

    window.onload = function () {

        var base_url = '{{ g.api_url }}';

        var channel_code = '{{ g.channel_code }}';

        var theGameId = '{{ game_id }}';

        loadingAnalyze('{{ g.analyze_url }}');

        request(base_url + '/game/member/game/detail/' + channel_code + '/' + theGameId)
                .done(function (data) {
                    dealGameDetail(data);
                })
                .fail(function () {
                    console.log('dealGameDetail error');
                });

        function dealGameDetail(json) {
            //添加第一页的大图
            var div = document.getElementById('parallax');
            var img = document.createElement('img');
            img.src = json.banner; //游戏详情里的大图
            div.appendChild(img);

            var detailUl = document.getElementById('detail_ul');
            var newli = document.createElement('li');
            newli.className = 'mui-table-view-cell mui-media main_column';

            /*获取星星显示的span*/
            var starSpan = '';
            var score_avg = json.score_avg == null ? '5.0' : json.score_avg; //分数
            var score_avg_x10 = score_avg * 10;
            var score_avg_x10_ = score_avg_x10 % 10;
            if (score_avg_x10_ > 0 && score_avg_x10_ <= 5) {
                needHalfStar = true;
            } else {
                needHalfStar = false;
            }
            //alert(needHalfStar);
            for (var home_hotgame_starnum = 0; home_hotgame_starnum < 5; home_hotgame_starnum++) {
                if (home_hotgame_starnum < parseInt(score_avg)) {
                    starSpan += '<span class="iconfont icon-xing1"></span>';
                } else {
                    if (home_hotgame_starnum == parseInt(score_avg) && needHalfStar) {
                        starSpan += '<span class="iconfont icon-ban_xing2"></span>';
                    } else {
                        if (home_hotgame_starnum == parseInt(score_avg) && score_avg_x10_ > 5) {
                            starSpan += '<span class="iconfont icon-xing1"></span>';
                        } else {
                            starSpan += '<span class="iconfont icon-xingxing"></span>';
                        }
                    }
                }
            }

            //有颜色的tag
            var all_tag_span = '';
            var colors = ["#7cc9ff", "#ff9999", "#4cac47", "#ff01c0", "#b057ca", "#ffae00"];
            for (var colorsnum = 0; colorsnum < json.categories.length; colorsnum++) {
                var n = Math.floor(Math.random() * colors.length + 1) - 1;
                var span = document.createElement('span');
                span.className = 'tag_flag';
                span.style.color = colors[n];
                span.style.borderStyle = "solid ";
                span.style.borderWidth = "1px ";
                span.style.borderColor = colors[n];
                span.innerText = json.categories[colorsnum].name;
                all_tag_span += span.outerHTML;
            }

            var tmpHtml = '<img class="mui-media-object mui-pull-left" src="' +
                    json.icon + //图片地址
                    '"><div class="mui-media-body main_title">' +
                    json.game_name + //主标题
                    '</div><div class="mui-media-body"><div style="display: inline;">' +
                    starSpan + //星星
                    '<span class="final_score">&nbsp;&nbsp;' +
                    formateFixedOne(score_avg) + //分数
                    '</span></div><span class="mui-pull-right iconfont icon-xiazai hot_download button_download" data_android_link="' +
                    getRealLink(json.channel_game.android_link,json.android_link) + //安卓链接
                    '" data_ios_link ="' +
                    getRealLink(json.channel_game.ios_link,json.ios_link) + //IOS链接
                    '" data-code ="' +
                    json.code + //data-code
                    '" data-id ="' +
                    localStorage.getItem('user_id') + //data-id
                    '">下载</span></div><div class="mui-media-body mui-ellipsis">' +
                    all_tag_span + //类型
                    '</div>';

            newli.innerHTML = tmpHtml;
            detailUl.appendChild(newli);

            //一句话评论
            var one_sentence = document.getElementById('comment_content');
            one_sentence.innerHTML = json.tagline;

            //banner图
            var detail_banner = document.getElementById('detail_banner');
            for (var detail_banner_num = 0; detail_banner_num < json.galleries.length; detail_banner_num++) {
                var div = document.createElement('div');
                div.className = 'swiper-slide';
                var img = document.createElement('img');
                img.src = json.galleries[detail_banner_num];
                div.appendChild(img);
                detail_banner.appendChild(div);
            }

            //轮播图点击
            mui('#detail_banner').on('tap', 'div', function () {
//			alert(this);
            })

            var mySwiper = new Swiper('.swiper-container', {
                slidesPerView: 2.2,
                slidesOffsetBefore: 15,
                //				spaceBetween: 10,
                direction: 'horizontal', //'horizontal',//'vertical',
                loop: false,
                paginationClickable: true,
                observer: true, //修改swiper自己或子元素时，自动初始化swiper
                observeParents: true, //修改swiper的父元素时，自动初始化swiper
            })

            //描述文字
            var p = document.getElementsByClassName('detail_alltext_content');
            p[0].innerText = json.description;

            var tmp_txt = '开发者：' + json.develop.company + '<br />' + '大小：' + getAppSize(json) + 'MB' + '<br />' + '下载次数：' + json.download_times + '<br />' + '更新时间：' + formatTime(json.versions_timestamp) + '<br />' + '版本：' + json.versions;

            var div_message = document.getElementsByClassName('detail_alltext_messcontent');
            div_message[0].innerHTML = tmp_txt;

            /*设置可以拖动*/
            (function ($) {
                var scrollEl = document.getElementById("scroll");
                var scrollApi = $(scrollEl).scroll({
                    parallaxElement: '#parallax',
                    parallaxRatio: 0.5,
                });
            })(mui);

            var btn_download = document.getElementsByClassName('div_bottom_download_child');
            btn_download[0].setAttribute('data_android_link', getRealLink(json.channel_game.android_link,json.android_link));
            btn_download[0].setAttribute('data_ios_link', getRealLink(json.channel_game.ios_link,json.ios_link));
            btn_download[0].setAttribute('data-code', json.code);
            btn_download[0].setAttribute('data-id', localStorage.getItem('user_id'));


            //上面下载小按钮
            var btn_download_small = document.getElementsByClassName('button_download');
            btn_download_small[0].addEventListener('tap', function () {
                download(this, isIOSClient(), this.getAttribute('data_ios_link'), this.getAttribute('data_android_link'));
//			downloadRequest(this);
            })

            //下载按钮
            mui('.div_bottom_download').on('tap', '.div_bottom_download_child', function () {
                download(this, isIOSClient(), this.getAttribute('data_ios_link'), this.getAttribute('data_android_link'));
//			downloadRequest(this);
            });

            //切换详情和评论
            mui('#segmentedControl').on('tap', '#btn_comment', function () {
                var div_bottom_download = document.getElementsByClassName('div_bottom_download');
                div_bottom_download[0].style.display = 'none';
                var div_bottom_input = document.getElementsByClassName('div_bottom_input');
                div_bottom_input[0].style.display = 'block';

                var input_area = document.getElementsByClassName('test-textarea');
                input_area[0].innerText = ''; //
                input_area[0].setAttribute("placeholder", "我也来说两句");
            });
            mui('#segmentedControl').on('tap', '#btn_describe', function () {
                var div_bottom_download = document.getElementsByClassName('div_bottom_download');
                div_bottom_download[0].style.display = 'block';
                var div_bottom_input = document.getElementsByClassName('div_bottom_input');
                div_bottom_input[0].style.display = 'none';
            });

        }


        //获取某个游戏我的评分
        request(base_url + '/game/member/score', {
            "type": "map",
            "content": {
                "game_id": theGameId,
                "token": localStorage.getItem('token')
            }
        })
                .done(function (data) {
                    console.log('获取某个游戏我的打分成功');
                    getMyScore(data);
                })
                .fail(function () {
                    console.log('获取某个游戏我的打分错误');
                });

        function getMyScore(json) {
            if (json.score == 0) {
                localStorage.setItem('score', '');
                initClickMyStar();
                return;
            }
            localStorage.setItem('score', json.score);
            /*获取星星显示的span*/
            var starSpan = '';
            var score_avg = json.score; //分数
            for (var myscore_starnum = 0; myscore_starnum < 5; myscore_starnum++) {
                if (myscore_starnum < parseInt(score_avg)) {
                    starSpan += '<span class="iconfont icon-xing1"></span>';
                } else {
                    starSpan += '<span class="iconfont icon-xingxing"></span>';
                }
            }
            document.getElementById('myscore_star').innerHTML = starSpan;
            //根据分数更新分数描述
            var word = document.getElementById('word');
            word.innerText = json.score == 5 ? '力挺' : json.score == 4 ? '不错' : json.score == 3 ? '一般' : json.score == 2 ? '较差' : json.score == 1 ? '糟糕' : '力挺';
        }

        function initClickMyStar() {
            //我的评分点击
            mui('.icons').on('tap', 'span', function () {
                var index = parseInt(this.getAttribute("data-index"));
                var parent = this.parentNode;
                var children = parent.children;
                if (this.classList.contains("icon-xingxing")) {
                    for (var i = 0; i < index; i++) {
                        children[i].classList.remove('icon-xingxing');
                        children[i].classList.add('icon-xing1');
                    }
                } else {
                    for (var i = index; i < 5; i++) {
                        children[i].classList.add('icon-xingxing')
                        children[i].classList.remove('icon-xing1')
                    }
                }
                starIndex = index;
                var word = document.getElementById('word');
                switch (starIndex) {
                    case 5:
                        word.innerText = '力挺';
                        sure(5);
                        break;
                    case 4:
                        word.innerText = '不错';
                        sure(4);
                        break;
                    case 3:
                        word.innerText = '一般';
                        sure(3);
                        break;
                    case 2:
                        word.innerText = '较差';
                        sure(2);
                        break;
                    case 1:
                        word.innerText = '糟糕';
                        sure(1);
                        break;
                }
            });

        }

        function sure(score) {
            var btnArray = ['否', '是'];
            mui.confirm('确定评' + score + '分吗？', '', btnArray, function (e) {
                if (e.index == 1) {
                    //确定
                    send_score_to_server(theGameId, score);
                } else {
                    //取消

                }
            })
        }

        //创建评分接口
        function send_score_to_server(gameid, score) {
            request(base_url + '/game/member/score?token=' + localStorage.getItem('token'), {
                "type": "json",
                "content": {
                    "game_id": gameid,
                    "score": score,
                }
            }, "post")
                    .done(function (data) {
                        console.log('评分成功');
                        mui.toast('评分成功');
                        //保存评分到本地
                        localStorage.setItem('score', data.score);
                        mui('.icons').off('tap', 'span');
                        //更新上面分数数值
                        var final_score = document.getElementsByClassName('final_score');
                        final_score[0].innerHTML = "&nbsp;&nbsp;" + formateFixedOne(data.score_avg);
                    })
                    .fail(function () {
                        console.log('评分失败');
                    });
        }

        //获取某个游戏评论
        function requestDetailByGameId(gameid) {
            request(base_url + '/game/member/discuss/' + gameid, {
                "type": "map",
                "content": {
                    "token": localStorage.getItem('token')
                }
            })
                    .done(function (data) {
                        console.log('获取某个游戏评论成功 ');
                        dealGameDetailComment(data);
                    })
                    .fail(function () {
                        console.log('获取某个游戏评论失败');
                    });
        }

        requestDetailByGameId(theGameId);

        function dealGameDetailComment(json) {
//		var comment_item_title = document.getElementsByClassName('comment_item_title');
//		comment_item_title[0].innerText = '评论（' + json.count + '）';

            var btn_comment = document.getElementById('btn_comment');
            btn_comment.innerText = '评论（' + json.count + '）';

            //评论的ul列表
            var comment_ul = document.getElementsByClassName('all_comment_ul');

            for (var comment_num = 0; comment_num < json.count; comment_num++) {
                var li = document.createElement('li');
                li.className = 'mui-table-view-cell mui-media';
                li.id = json.items[comment_num].id;
                li.setAttribute('data-parentId', json.items[comment_num].id);
                li.setAttribute('data-gemeId', json.items[comment_num].game_id);

                /*每个账户星星显示数量*/
                var smallStarSpan = '';
                var score_avg = json.items[comment_num].score; //分数
                for (var myscore_starnum = 0; myscore_starnum < 5; myscore_starnum++) {
                    if (myscore_starnum < parseInt(score_avg)) {
                        smallStarSpan += '<span class="iconfont icon-xing1"></span>';
                    } else {
                        smallStarSpan += '<span class="iconfont icon-xingxing"></span>';
                    }
                }
                //评论头像部分
                var tmpHtml = '<div class="comment_item"><div class="mui-media-body" style="height: 0.8rem;"><img class="mui-media-object mui-pull-left" src="' +
                        json.items[comment_num].from_avatar + //头像
                        '"><span class="comment_item_name">用户' +
                        json.items[comment_num].from_nickname + //账户名
                        '</span><span class="iconfont icon-pl comment_icon mui-pull-right">' +
                        json.items[comment_num].children.length + //评论数
                        '</span><span class="iconfont icon-zan upvote  mui-pull-right">' +
                        json.items[comment_num].praise_count + //点赞数
                        '</span><div class="comment_item_star">' +
                        smallStarSpan + //星星显示
                        '</div></div></div>';

                li.innerHTML = tmpHtml;

                //点过赞的设置颜色
                var ivote = li.getElementsByClassName('upvote');
                if (json.items[comment_num].praised) {
                    ivote[0].style.color = '#ff6494';
                    //							alert(this.)
                } else {
                    ivote[0].style.color = '#333333';
                }

                //评论文字部分
                var comment_text = document.createElement('div');
                comment_text.className = 'comment_text';
                //文字
                var comment_text_content = document.createElement('div');
                comment_text_content.className = 'comment_text_content';
                comment_text_content.innerText = json.items[comment_num].content;
                //日期
                var comment_text_data = document.createElement('div');
                comment_text_data.className = 'comment_text_data';
                comment_text_data.innerText = formatTime(json.items[comment_num].created_timestamp);
                //其他评论
                var comment_others = document.createElement('div');
                comment_others.className = 'comment_others';

                //评论有留言才添加comment_others
                if (json.items[comment_num].children.length > 0) {

                    //小三角
                    var img_div = document.createElement('div');
                    var img = document.createElement('img');
                    img.className = 'xiaosanjiao';
                    img.src = '/static/components/img/yxxq/sanjiao_128.png';
                    img_div.appendChild(img);
                    comment_others.appendChild(img_div);

                    //回复的ul列表
                    var other_ul = document.createElement('ul');
                    other_ul.className = 'comment_other_ul';

                    for (var childrenNum = 0; childrenNum < json.items[comment_num].children.length; childrenNum++) {
                        var other_li = document.createElement('li');

                        //child的parent_id和评论的id一样表示直接对评论回复
                        if (json.items[comment_num].children[childrenNum].parent_id == json.items[comment_num].id) {

                            other_li.setAttribute('data-fromName', json.items[comment_num].children[childrenNum].from_nickname);
                            other_li.setAttribute('data-toName', json.items[comment_num].children[childrenNum].to_nickname);
                            other_li.setAttribute('data-parentId', json.items[comment_num].children[childrenNum].parent_id);
                            other_li.setAttribute('data-id', json.items[comment_num].children[childrenNum].id);
                            other_li.setAttribute('data-gemeId', json.items[comment_num].children[childrenNum].game_id);

                            other_li.innerText = "用户" + other_li.getAttribute('data-fromName') + ':' + json.items[comment_num].children[childrenNum].content;
                        } else {
                            other_li.setAttribute('data-fromName', json.items[comment_num].children[childrenNum].from_nickname);
                            other_li.setAttribute('data-toName', json.items[comment_num].children[childrenNum].to_nickname);
                            other_li.setAttribute('data-parentId', json.items[comment_num].children[childrenNum].parent_id);
                            other_li.setAttribute('data-id', json.items[comment_num].children[childrenNum].id);
                            other_li.setAttribute('data-gemeId', json.items[comment_num].children[childrenNum].game_id);

                            other_li.innerText = other_li.getAttribute('data-fromName') + ' 回复  ' + other_li.getAttribute('data-toName') + ':' + json.items[comment_num].children[childrenNum].content;
                        }

                        other_ul.appendChild(other_li);
                    }
                    //把整个其他评论添加进去
                    comment_others.appendChild(other_ul);
                }

                //汇总
                comment_text.appendChild(comment_text_content);
                comment_text.appendChild(comment_text_data);
                comment_text.appendChild(comment_others);

                li.appendChild(comment_text);
                comment_ul[0].appendChild(li);
            }

            //设置其他人回复里的监听
            mui('.comment_other_ul').on('tap', 'li', function () {
                var input_area = document.getElementsByClassName('test-textarea');
                input_area[0].innerText = ''; //回复其他人时把输入框内容清空
                input_area[0].setAttribute("placeholder", '回复 ' + this.getAttribute('data-fromName'));
                input_area[0].setAttribute('data-parentId', this.getAttribute('data-id'));
                input_area[0].setAttribute('data-gemeId', this.getAttribute('data-gemeId'));

                //弹出输入法
                input_area[0].focus();
                return false;
            })

            //点赞按钮
            mui('.mui-media-body').on('click', '.upvote', function () {
                var num = this.innerText;
                if (num == '') {
                    num = 0;
                }

                if (this.style.color != 'rgb(255, 100, 148)') {
                    this.style.color = '#ff6494';
                    this.innerText = parseInt(num) + 1;
                    vote_upload(this, true);
                } else {
                    this.style.color = '#333333';
                    this.innerText = parseInt(num) - 1;
                    vote_upload(this, false);
                }

                return false;
            })

            function vote_upload(el, praised) {
                var liObj = el.parentNode;
                while (liObj.nodeName != 'LI' && liObj.parentNode != null) {
                    liObj = liObj.parentNode;
                }
                mui.toast(praised ? "点赞成功" : "取消点赞成功");
                if (praised) {
                    send_upvote_to_server(liObj.id);
                } else {
                    send_cancelupvote_to_server(liObj.id);
                }
            }

            //评论按钮
            mui('.mui-media-body').on('click', '.comment_icon', function () {
                /*获取前一个不为空的兄弟元素*/
                //					var tempObj = this.previousSibling;
                //					while (tempObj.nodeType != 1 && tempObj.previousSibling != null) {
                //				    	tempObj = tempObj.previousSibling;
                //				    }

                var liObj = this.parentNode;
                while (liObj.nodeName != 'LI' && liObj.parentNode != null) {
                    liObj = liObj.parentNode;
                }
                var input_area = document.getElementsByClassName('test-textarea');
                input_area[0].innerText = ''; //回复其他人时把输入框内容清空
                input_area[0].setAttribute("placeholder", '回复 ' + liObj.getElementsByClassName('comment_item_name')[0].innerText);
//			alert(liObj.getAttribute('data-parentId'));
//			alert(liObj.getAttribute('data-gemeId'));
                input_area[0].setAttribute('data-parentId', liObj.getAttribute('data-parentId'));
                input_area[0].setAttribute('data-gemeId', liObj.getAttribute('data-gemeId'));

                //弹出输入法
                input_area[0].focus();

                //					alert(tempObj);
                return false;
            })

            //fasong
            mui('div').on('tap', '.btn_send_comment', function () {
                var input_area = document.getElementsByClassName('test-textarea');
//			alert(input_area[0].getAttribute('data-parentId'));
//			alert(input_area[0].getAttribute('data-gemeId'));

                if (isNull(localStorage.getItem('score')) == '') {
                    mui.toast('请先评分后再进行评论');
                    return;
                }
                var content = input_area[0].innerText;
                var gemeId = input_area[0].getAttribute('data-gemeId');
                var parentId = input_area[0].getAttribute('data-parentId');
                addMyComment(input_area[0]);
                return false;
            })

            //输入框失焦监听
            var input_area = document.getElementsByClassName('test-textarea');
            input_area[0].addEventListener('blur', function () {
                if (input_area[0].getAttribute("placeholder").indexOf("回复") != -1) {
                    input_area[0].setAttribute("placeholder", '我也来说两句');
                    input_area[0].setAttribute('data-parentId', '');
                    input_area[0].setAttribute('data-gemeId', '');
                }
            })

        }

        function addMyComment(el) {
            //先判断评论内容长度
            if (el.innerText.length < 1) {
                mui.toast('还未输入任何字符');
                return;
            } else if (el.innerText.length > 140) {
                mui.toast('评论长度最大为140个字');
                return;
            }

            request(base_url + '/game/member/discuss?token=' + localStorage.getItem('token'), {
                "type": "json",
                "content": {
                    "game_id": theGameId,
                    "content": el.innerText,
                    "parent_id": el.getAttribute('data-parentId')
                }
            }, "post")
                    .done(function (data) {
                        console.log('评论成功');
                        mui.toast('评论成功');

                        //重置发送按钮
                        mui('div').off('tap', '.btn_send_comment')

                        //评论后清除textarea内容
                        el.innerText = '';
                        el.setAttribute('placeholder', "我也来说两句");
                        el.blur();
                        //删除原来ul
                        var ori_ul = document.getElementsByClassName('all_comment_ul');
                        ori_ul[0].innerHTML = "";
                        requestDetailByGameId(theGameId);
                    })
                    .fail(function () {
                        console.log('评论失败');
                    });
        }


    }
</script>
</body>

</html>